<template>
  <div>
    <a-input-search
      placeholder="输入姓名"
      enter-button
      style="width: 200px"
      v-model="onSearchNAME"
      @search="onclick"
    />
    <a-input-search
      placeholder="查找邮箱"
      enter-button
      style="width: 200px"
      v-model="onSearchEMAIL"
      @search="onclick1"
    />
    <a-button @click="original">重置</a-button>
    <a-button @click="UP">升序</a-button>
    <a-button @click="DOWN">降序</a-button>

    <a-table
      :columns="columns"
      :data-source="show"
      bordered
      :pagination="{ pageSize:5,list:list.length }"
    >
      <template slot="created_at" slot-scope="propss">
        <span>{{propss|timefilter}}</span>
      </template>
      <template slot="Action" slot-scope="text,recode">
        <a-button type="primary" icon="edit" />
        <a-button type="danger" icon="delete" @click="RowDELL(recode)" />
      </template>
    </a-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      show: [],
      list: [],
      onSearchNAME: "",
      onSearchEMAIL: "",
      columns: [
        {
          title: "id名",
          dataIndex: "id",
        },
        {
          title: "会员",
          dataIndex: "role_name",
          scopedSlots: { customRender: "role_name" },
        },
        {
          title: "姓名",
          dataIndex: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "邮箱",
          dataIndex: "email",
          scopedSlots: { customRender: "email" },
        },
        {
          title: "手机号",
          dataIndex: "tell",
          scopedSlots: { customRender: "tell" },
        },
        {
          title: "时间",
          dataIndex: "created_at",
          scopedSlots: { customRender: "created_at" },
        },
        {
          title: "操作",
          dataIndex: "Action",
          scopedSlots: { customRender: "Action" },
        },
      ],
    };
  },
  filters: {
    timefilter: function (value) {
      var date = new Date(value * 1000).toLocaleString();
      return date;
    },
  },
  mounted() {
    axios.get("http://localhost:8080/userlist.json").then((res) => {
      console.log(res.data.data.users);
      this.list = res.data.data.users;
      this.show = res.data.data.users;
    });
  },
  methods: {
    onclick() {
      this.show = [];
      this.list.forEach((ele) => {
        if (ele.name.includes(this.onSearchNAME)) {
          this.show.push(ele);
        }
      });
    },
    onclick1() {
      this.show = [];
      this.list.forEach((ele) => {
        if (ele.email.includes(this.onSearchEMAIL)) {
          this.show.push(ele);
        }
      });
    },
    RowDELL(props) {
      console.log(props);
      var a = this.show.findIndex((e) => {
        return (e.id = props.id);
      });
      if (a != -1) {
        this.show.splice(a, 1);
      }
    },
    // 重置
    original() {
      this.show = this.list;
    },
    // 升序
    UP() {
      this.show.sort((a, b) => {
        return a.created_at - b.created_at;
      });
    },
    DOWN() {
      this.show.sort((a, b) => {
        return b.created_at - a.created_at;
      });
    },
  },
};
</script>

<style>
</style>